<template>
  <div class="swiper-container-wrapper">
    <div class="swiper" ref="swiperRef">
      <div class="swiper-wrapper">
        <div v-for="(slide, index) in slides" :key="index" class="swiper-slide">
          <div class="slide-content">
            <img :src="slide.image" alt="Slide" class="slide-image" />
            <div class="slide-overlay">
              <h3 class="slide-title">{{ slide.title || `Slide ${index + 1}` }}</h3>
              <p class="slide-description">{{ slide.description || 'This is a beautiful slide' }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
// 导入完整的Swiper包
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

// 导入图片
import redImg from '@/assets/imgs/red.jpg';
import orangeImg from '@/assets/imgs/orange.jpg';
import yellowImg from '@/assets/imgs/yellow.jpg';
import greenImg from '@/assets/imgs/green.jpg';
import blueImg from '@/assets/imgs/blue.jpg';

// 轮播图数据
const swiperRef = ref(null);
const slides = ref([
  { 
    image: redImg, 
    title: 'Red shape'
  },
  { 
    image: orangeImg, 
    title: 'Orange shape'
  },
  { 
    image: yellowImg, 
    title: 'Yellow shape'
  },
  { 
    image: greenImg, 
    title: 'Green shape'
  },
  { 
    image: blueImg, 
    title: 'Blue shape'
  }
]);

onMounted(() => {
  nextTick(() => {
    // 初始化Swiper
    const swiper = new Swiper(swiperRef.value, {
      // 配置选项
      slidesPerView: 1,
      spaceBetween: 0,
      loop: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      speed: 800,
      effect: 'fade',
      fadeEffect: {
        crossFade: true
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // 添加响应式配置
      breakpoints: {
        768: {
          slidesPerView: 1,
        },
        1024: {
          slidesPerView: 1,
        },
      },
      // 添加事件监听器
      on: {
        init() {
          console.log('Swiper initialized successfully');
        },
        slideChange() {
          console.log('Slide changed to: ', this.activeIndex);
        }
      }
    });
  });
});
</script>

<style scoped>
.swiper-container-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.swiper {
  width: 100%;
  height: 450px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.slide-content {
  position: relative;
  width: 100%;
  height: 350px;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.swiper-slide-active .slide-image {
  transform: scale(1.02);
}

.slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  transition: all 0.3s ease;
}

.slide-title {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s ease 0.2s;
}

.slide-description {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s ease 0.4s;
}

.swiper-slide-active .slide-title,
.swiper-slide-active .slide-description {
  transform: translateY(0);
  opacity: 1;
}

.swiper-pagination {
  bottom: 20px !important;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: white;
  width: 30px;
  border-radius: 6px;
}

.swiper-button-prev,
.swiper-button-next {
  color: white !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 18px !important;
  font-weight: bold;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .swiper {
    height: 300px;
  }
  
  .slide-overlay {
    padding: 20px;
  }
  
  .slide-title {
    font-size: 22px;
  }
  
  .slide-description {
    font-size: 14px;
  }
  
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}
</style>